<template>
  <el-dialog
    style="overflow: hidden"
    v-model="visible"
    title="人员配置"
    width="70%"
    class="notice-dialog"
    @close="closeHandle"
    @close-click-modal="closeHandle"
  >
    <div class="big-box">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-row>
            <el-col :span="24">
              <el-card class="box-card">
                <template #header>
                  <div class="card-header">
                    <span>组长</span>
                  </div>
                </template>
                <div class="left-small-box">
                  <div class="text item">
                    <el-row @click="searchShow = !searchShow">
                      <el-col :span="4"></el-col>
                      <el-col :span="12" align="center">搜索添加人员</el-col>
                      <el-col :span="8" align="end"
                        ><el-icon v-if="searchShow === true"><ArrowUpBold /></el-icon>
                        <el-icon v-else><ArrowDownBold /></el-icon>
                      </el-col>
                    </el-row>
                    <div class="search-box" v-show="searchShow">
                      <div class="search-contain">
                        <el-input
                          v-model="input2"
                          class="w-50 m-2"
                          placeholder="搜索人员名称或机构名称"
                          :suffix-icon="Search"
                        />
                        <el-button @click="addSelectHandle">添加所选人员</el-button>

                        <ul>
                          <li v-for="item in searchResult" :key="item.id">
                            <input
                              type="checkbox"
                              :value="item"
                              @change="selectHandle(selectedItems)"
                              v-model="selectedItems"
                            />
                            <span>{{ item.name }}</span>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div v-if="searchShow === false && peopleList.length">
                    <div v-for="v in peopleList" :key="v.id" class="text item contain1">
                      <el-row>
                        <el-col :span="12">{{ v.name }}</el-col>
                        <el-col :span="12" align="end"
                          ><el-icon @click="delLeaderHandle(v)"><CircleCloseFilled /></el-icon
                        ></el-col>
                      </el-row>
                    </div>
                  </div>
                  <div v-else-if="searchShow === false && peopleList.length === 0">
                    <el-empty :image="emptyImg" description="暂无配置相关人员，请点击【添加人员】进行配置" />
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="24">
              <el-card class="box-card">
                <template #header>
                  <div class="card-header">
                    <span>主审</span>
                  </div>
                </template>
                <div class="left-small-box">
                  <div class="text item">
                    <el-row @click="endsearchShow = !endsearchShow">
                      <el-col :span="4"></el-col>
                      <el-col :span="12" align="center">搜索添加人员</el-col>
                      <el-col :span="8" align="end"
                        ><el-icon v-if="endsearchShow === true"><ArrowUpBold /></el-icon>
                        <el-icon v-else><ArrowDownBold /></el-icon>
                      </el-col>
                    </el-row>
                    <div class="search-box" v-show="endsearchShow">
                      <div class="search-contain">
                        <el-input
                          v-model="input2"
                          class="w-50 m-2"
                          placeholder="搜索人员名称或机构名称"
                          :suffix-icon="Search"
                        />
                        <el-button @click="endaddSelectHandle">添加所选人员</el-button>

                        <ul>
                          <li v-for="item in endsearchResult" :key="item.id">
                            <input
                              type="checkbox"
                              :value="item"
                              @change="endselectHandle(endselectedItems)"
                              v-model="endselectedItems"
                            />
                            <span>{{ item.name }}</span>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div v-if="endsearchShow === false && endpeopleList.length">
                    <div v-for="v in endpeopleList" :key="v.id" class="text item contain1">
                      <el-row>
                        <el-col :span="12">{{ v.name }}</el-col>
                        <el-col :span="12" align="end"
                          ><el-icon @click="enddelLeaderHandle(v)"><CircleCloseFilled /></el-icon
                        ></el-col>
                      </el-row>
                    </div>
                  </div>
                  <div v-else-if="endsearchShow === false && endpeopleList.length === 0">
                    <el-empty :image="emptyImg" description="暂无配置相关人员，请点击【添加人员】进行配置" />
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="16">
          <el-card class="box-card right-big-box">
            <template #header>
              <div class="card-header">
                <span>其他成员</span>
                <span @click="addGroup" class="text-add-btn">添加分组</span>
              </div>
            </template>
            <div class="right-big-contain">
              <el-row v-for="item in groupList" :key="item.index">
                <el-col :span="23">
                  <el-card class="box-card small-box">
                    <template #header>
                      <div class="card-header">
                        <!-- <span >{{ item.title }}</span> -->

                        <span v-if="(item.type === 'normal' || item.type === 'add') && item.groupNameShow === false">{{
                          item.title
                        }}</span>
                        <el-input
                          v-else-if="item.groupNameShow === true"
                          style="width: 30%"
                          v-model="item.title"
                          placeholder="输入组名称"
                        />
                        <div v-if="item.type === 'add' && item.groupNameShow === false">
                          <span class="text-add-btn" @click="item.groupNameShow = !item.groupNameShow"
                            >编辑</span
                          >
                          <span class="text-del-btn" @click="delGroupHandle(item)">删除</span>
                        </div>
                        <div v-if="item.type === 'add' && item.groupNameShow === true">
                          <span @click="item.groupNameShow = !item.groupNameShow" class="text-add-btn">创建</span>
                          <span
                            @click="item.groupNameShow = !item.groupNameShow"
                            class="text-cancel-btn"
                            >取消</span
                          >
                        </div>
                      </div>
                    </template>
                    <div class="right-small-contain">
                      <div v-for="v in item.peopleList" :key="v.id" class="text item">
                        <el-row>
                          <el-col :span="12">{{ v.name }}</el-col>
                          <el-col :span="12" align="end"
                            ><el-icon @click="delGroupPeople(v, item.peopleList)"><CircleCloseFilled /></el-icon
                          ></el-col>
                        </el-row>
                      </div>
                      <div class="add-people-box" v-if="item.addShow === true">
                        <el-select
                          v-model="userInfo.name"
                          multiple
                          filterable
                          remote
                          reserve-keyword
                          placeholder="搜索选择人员名称"
                          :remote-method="remoteMethod"
                          :loading="loading"
                        >
                          <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                        <el-select v-model="userInfo.zhiwu" placeholder="选择对应角色">
                          <el-option
                            v-for="res in options1"
                            :key="res.value"
                            :label="res.label"
                            :value="res.value"
                            :disabled="res.disabled"
                          />
                        </el-select>
                        <div class="add-people-btn">
                          <span @click="addPeopleHandle(item)" class="text-add-btn">添加</span>
                          <span class="text-cancel-btn" @click="item.addShow = false">取消</span>
                        </div>
                      </div>
                      <el-col :span="24" align="center" v-if="item.peopleList.length !== 0">
                        <el-button @click="item.addShow = true" plain>添加人员</el-button>
                      </el-col>
                      <el-empty
                        :image="emptyImg"
                        description="暂无配置相关人员，请点击【添加人员】进行配置"
                        v-else-if="item.peopleList.length === 0 && item.addShow === false"
                      >
                        <el-button @click="item.addShow = true" type="primary">添加人员</el-button>
                      </el-empty>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <template #footer>
      <el-row>
        <el-col :span="24" align="end">
          <el-button @click="closeHandle">取消</el-button>
          <el-button type="primary" @click="saveHandle"> 保存 </el-button>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>
<script setup>
import { Search } from '@element-plus/icons-vue';
import { ElMessageBox } from 'element-plus';
import emptyImg from '@/assets/images/project-control/empty-people.png';
const peopleVisible = defineProps({
  dialogVisible: Boolean,
});
const visible = ref(peopleVisible.dialogVisible);
const searchShow = ref(false);
const endsearchShow = ref(false);
// 左侧组长/主审静态数据
const peopleList = ref([
  {
    id: 1,
    name: '张三',
    zhiwu: '组长',
    bumen: '山东子公司/审计部4',
  },
  {
    id: 2,
    name: '李四',
    zhiwu: '组长',
    bumen: '山东子公司/审计部5',
  },
  {
    id: 3,
    name: '王斌武',
    zhiwu: '组长',
    bumen: '山东子公司/审计部6',
  },
]);
const endpeopleList = ref([
  {
    id: 1,
    name: '张三',
    zhiwu: '组长',
    bumen: '山东子公司/审计部4',
  },
  {
    id: 2,
    name: '李四',
    zhiwu: '组长',
    bumen: '山东子公司/审计部5',
  },
  {
    id: 3,
    name: '王斌武',
    zhiwu: '组长',
    bumen: '山东子公司/审计部6',
  },
]);
// 左侧搜索添加人员静态数据
const searchResult = ref([
  {
    id: 4,
    name: '张三',
    zhiwu: '组长',
    bumen: '山东子公司/审计部1',
  },
  {
    id: 5,
    name: '李四',
    zhiwu: '组长',
    bumen: '山东子公司/审计部2',
  },
  {
    id: 6,
    name: '王斌武',
    zhiwu: '组长',
    bumen: '山东子公司/审计部3',
  },
]);
const endsearchResult = ref([
  {
    id: 4,
    name: '张三',
    zhiwu: '组长',
    bumen: '山东子公司/审计部1',
  },
  {
    id: 5,
    name: '李四',
    zhiwu: '组长',
    bumen: '山东子公司/审计部2',
  },
  {
    id: 6,
    name: '王斌武',
    zhiwu: '组长',
    bumen: '山东子公司/审计部3',
  },
]);
// 搜索后选中的数据
const selectedItems = ref([]);
const endselectedItems = ref([]);
/* 选中后处理多的一条数据
（目前来看猜测多一条数据是因为Vue的双向绑定机制引起的
总会出现额外的一条数据（0: 1）是由于selectedItems数组的默认行为
Vue会自动为数组添加一个响应式的length属性，并且这个属性会导致额外的一条数据出现在selectedItems中，即使数组本身没有元素）
 */
const selectHandle = () => {
  selectedItems.value.splice(-1, 0);
};
const endselectHandle = () => {
  endselectedItems.value.splice(-1, 0);
};
// 添加所选数据方法
const addSelectHandle = () => {
  searchShow.value = false;
  selectedItems.value.forEach((item) => {
    peopleList.value.push(item);
  });
  selectedItems.value = [];
};
const endaddSelectHandle = () => {
  endsearchShow.value = false;
  endselectedItems.value.forEach((item) => {
    endpeopleList.value.push(item);
  });
  endselectedItems.value = [];
};
const delLeaderHandle = (v) => {
  console.log('要删除的数据', v);
  ElMessageBox.confirm('你确定要删除这条数据吗')
    .then(() => {
      peopleList.value = peopleList.value.filter(item => item.id !== v.id);
    })
    .catch(() => {
      // catch error
    });
};
const enddelLeaderHandle = (v) => {
  console.log('要删除的数据', v);
  ElMessageBox.confirm('你确定要删除这条数据吗')
    .then(() => {
      endpeopleList.value = endpeopleList.value.filter(item => item.id !== v.id);
    })
    .catch(() => {
      // catch error
    });
};

// 右侧卡片内部数据
const groupList = ref([
  {
    index: 1,
    title: '默认成员',
    type: 'normal',
    groupNameShow: false,
    addShow: false,
    peopleList: [
      {
        id: 1,
        name: '张三',
        zhiwu: '组长',
        bumen: '山东子公司/审计部',
      },
      {
        id: 3,
        name: '王斌武1',
        zhiwu: '组长',
        bumen: '山东子公司/审计部',
      },
      {
        id: 11,
        name: '张三2',
        zhiwu: '组长',
        bumen: '山东子公司/审计部',
      },
      {
        id: 33,
        name: '王斌武3',
        zhiwu: '组长',
        bumen: '山东子公司/审计部',
      },
    ],
  },
  {
    index: 2,
    title: '巡视组',
    type: 'add',
    groupNameShow: false,
    addShow: false,
    peopleList: [
      {
        id: 1,
        name: '张三',
        zhiwu: '组长',
        bumen: '山东子公司/审计部',
      },
    ],
  },
  {
    index: 3,
    title: '巡视组',
    type: 'add',
    groupNameShow: false,
    addShow: false,
    peopleList: [
      {
        id: 1,
        name: '张三',
        zhiwu: '组长',
        bumen: '山东子公司/审计部',
      },
    ],
  },
]);
const userInfo = reactive({
  name: '',
  bumen: '',
  zhiwu: '',
});
const list = ref([]);
const options1 = ref([
  [
    {
      value: 'Option1',
      label: 'Option1',
    },
    {
      value: 'Option2',
      label: 'Option2',
      disabled: true,
    },
    {
      value: 'Option3',
      label: 'Option3',
    },
    {
      value: 'Option4',
      label: 'Option4',
    },
    {
      value: 'Option5',
      label: 'Option5',
    },
  ],
]);
const options = ref([]);
const states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California'];
onMounted(() => {
  list.value = states.map(item => ({ value: `value:${item}`, label: `label:${item}` }));
});
const remoteMethod = (query) => {
  if (query) {
    setTimeout(() => {
      options.value = list.value.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));
    }, 200);
  } else {
    options.value = [];
  }
};
// 添加人员
const addPeopleHandle = (v) => {
  v.peopleList.push({
    id: randomId(),
    name: userInfo.name,
    zhiwu: userInfo.zhiwu,
    bumen: userInfo.bumen,
  });
  v.addShow = false;
  userInfo.name = '';
  userInfo.bumen = '';
  userInfo.zhiwu = '';
};
// 随机生成id方法
const randomId = () => {
  const randomNum = Math.floor(Math.random() * 100000);
  const timestamp = Date.now().toString(36);
  return `${timestamp}-${randomNum}`;
};

console.log('随机id', randomId());
const addGroup = () => {
  const createID = randomId();
  groupList.value.push({
    index: createID,
    title: '新建分组',
    type: 'add',
    peopleList: [],
    groupNameShow: false,
  });
};
// 删除组
const delGroupHandle = (v) => {
  console.log(v.index);
  ElMessageBox.confirm('你确定要删除组吗')
    .then(() => {
      groupList.value = groupList.value.filter(item => item.index !== v.index);
    })
    .catch(() => {
      // catch error
    });
};
// 删除组成员
const delGroupPeople = (v, list) => {
  const index = list.findIndex(item => item.id === v.id);
  if (index !== -1) {
    list.splice(index, 1);
  }
};

// 弹框开关事件
watch(
  () => peopleVisible.dialogVisible,
  (v) => {
    visible.value = v;
  },
);

const emit = defineEmits(['getPeopleValue']);
const closeHandle = () => {
  emit('getPeopleValue', false);
};
</script>
<style lang="scss" scoped>
img {
  vertical-align: middle;
  height: 20px;
  width: 20px;
  margin-right: 10px;
}
::v-deep .el-empty__image img {
  height: 40% !important;
  width: 40% !important;
}
.search-box {
  width: 93%;
  margin: auto;
  padding: 10px;
  .search-contain {
    margin-left: 10px;
    .el-button {
      margin: 10px 0 0 0;
    }
    ul {
      li {
        font-size: 12px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #50565d;
        line-height: 17px;
        margin: 10px 0;
        input {
          vertical-align: middle;
          margin-right: 15px;
        }
      }
    }
  }
}
.left-small-box {
  height: 27vh;
  overflow: auto;
  .contain1 {
    .el-row {
      background: none;
      border: 1px dashed #dbddde;
      margin: 20px 10px 0 20px;
      color: #25292c;
      cursor: context-menu;
      .el-col {
        margin-bottom: 0;
        padding: 8px;
        .el-icon {
          color: red;
          cursor: pointer;
        }
      }
    }
  }
  .el-row {
    background: #2e72ef;
    border-radius: 4px 4px 4px 4px;
    margin: 20px 10px 0 20px;
    color: #ffffff;
    cursor: pointer;
    .el-col {
      margin-bottom: 0;
      padding: 8px;
      .el-icon {
        cursor: pointer;
      }
    }
  }
}
.el-card.is-always-shadow {
  border: 1px solid #e8e7ea !important;
  height: 30vh;
}
.right-big-box {
  height: 60.9vh !important;
  .right-big-contain {
    height: 57vh;
    overflow: auto;
    .right-small-contain {
      height: 23vh !important;
      overflow: auto;
      .el-row {
        border: 1px dashed #dbddde;
        margin: 20px 10px 0 20px;
        .el-col {
          margin-bottom: 0;
          padding: 8px;
          .el-icon {
            color: red;
          }
        }
      }
    }
  }
}
.small-box {
  margin: 15px 0 0 16px;
}
.el-card__header {
  height: 40px;
  background-color: #f5f7fb !important;
  border: 1px solid #e8e7ea;
  padding: 10px !important;
}
.card-header {
  line-height: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.add-people-box {
  margin-left: 20px;
  .el-select {
    margin: 5px 10px 30px 0;
    width: 40%;
  }
  .add-people-btn {
    display: inline-block;
    float: right;
    margin-right: 20px;
    margin-top: 5px;
  }
}
.text-add-btn {
  color: #48a2ff;
  cursor: pointer;
  margin-right: 10px;
}
.text-del-btn {
  color: red;
  cursor: pointer;
}
.text-cancel-btn {
  color: #606266;
  cursor: pointer;
}
</style>
